<template>
    <view>
        <view class = "huan">
            <span class="title">更换中学</span>
        </view>
        <view class="choice">
            <uni-data-select :localdata="range" placeholder="请选择中学"  >
            </uni-data-select>
        </view>
        <view class="huan">
            <span class="title">修改队伍名称</span>
        </view>
        <view >
            <uni-card :is-shadow="false" class="card">
                <text style="color: #212121;">武汉一中队</text>
            </uni-card>
        </view>
        <view class="huan">
            <span class = "title">队长信息</span>
        </view>
        <uni-card :is-shadow="false" class = "h"  >
            <img src = "/static/renwu1.jpg"  class = "k"></img>
            <text class = "i">陈婉仪</text>
            <text class = "woman">♀</text>
			
            <div class = "dev" @click="todz">
                <text class = "word">转让队长</text>
            </div>
			
        </uni-card>
        <view class="title"><text>队员信息</text></view>
        <uni-card :is-shadow="false" class = "duiyaun" >
            <view class = "ki">
                <img src = "/static/renwu2.jpg" class = "g">
                <text class = "zi" >张晓明</text>
                <text class = "man">♂</text>
                <div class = "dmv">
                    <text class = "word">📞拨打电话</text>
                </div>
                <view class="hr"></view>
            </view>
            <view class = "ji">
                <img src = "/static/renwu3.jpg" class = "g">
                <text class = "zi" >张晓明</text>
                <text class = "man">♂</text>
                <div class = "dmv">
                    <text class = "word">📞拨打电话</text>
                </div>
                <view class="hr"></view>
            </view>
            <view class = "ji">
                <img src = "/static/renwu4.jpg" class = "g">
                <text class = "zi" >王易阳</text>
                <text class = "man">♂</text>
                <div class = "dmv">
                    <text class = "word">📞拨打电话</text>
                </div>
            </view>
        </uni-card>
        <uni-list class="list">
            <uni-list-item :show-switch="true" title="成员招募"/>
        </uni-list>
        <view class = "l">
            <span class = "jie" style="position: absolute; bottom: 0px">队伍调整、解散队伍、退出队伍请联系管理员</span>
        </view>
    </view>
</template>

<script setup>
	import { ref } from 'vue';
	let todz=function(){
		uni.navigateTo({
		    url: '/pages/Student-captain/captain/default',
		})
	}
	const value = ref(0);
	const range = [
	{ value: 0, text: "华中师范大学一附中" },
	 { value: 0, text: "华中师范大学一附中" },
	 { value: 1, text: "湖北省武昌实验中学" },
	 { value: 2, text: "武汉外国语学校" },
	 { value: 3, text: "武汉一中" },
	 { value: 4, text: "武汉二中" },
	 { value: 5, text: "武汉六中" },
	];
</script>

<style>
.jie{
    position:relative;
    width: 240px;
    height: 17px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #999DA3;
    left:80px
}
.huan{
    margin-top: 10px;
    margin-bottom: 15px;
}
.title{
    margin-top: 15px;
    margin-left:17px;
    margin-bottom: 5px;
    color: #212121;
    font-weight: 900;
}

.choice{
    background: #FFFFFF;
    box-shadow: 0 2px 5px 0 #E2E4EB;
    border-radius: 6px;
    margin-left: 17px;
    margin-right: 17px;
}
.card{
    height: 45px;
    background: #FFFFFF;
    box-shadow: 0 2px 5px 0 #E2E4EB;
    border-radius: 6px;
}
.list{
    background: #FFFFFF;
    box-shadow: 0 2px 5px 0 #E2E4EB;
    border-radius: 20px;
    margin: 17px;
}
.h{
    height: 64px;
    background: #FFFFFF;
    box-shadow: 0 2px 5px 0 #E2E4EB;
    border-radius: 6px;
}
.g{
    position: relative;
    width: 30px;
    height: 30px;
    border: 0 solid #FFFFFF;
    border-radius: 50%;
    left: -10px;
    top:px
}
.k{
    position: relative;
    width: 30px;
    height: 30px;
    border: 0 solid #FFFFFF;
    border-radius: 50%;
    left: -10px;
    top:10px
}
.i{
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 15px;
    color: #212121;
    text-align: center;
}
.woman{
    font-size: 12px;
    font-weight: 10000;
    position:relative;
    color: #FF9494;
    top:-2px;
    left: 5px
}
.dev{
    margin-top: -25px;
    margin-left: 250px;
    text-align: center;
    width: 72px;
    height: 26px;
    background-image: linear-gradient(90deg, #6CA9FF 0%, #166AFF 100%);
    border-radius: 12px;
}
.word{
    position:relative;
    width: 48px;
    height: 17px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #FFFFFF;
    line-height: 26px;
}
.zi{
    position:relative;
    width: 45px;
    height: 21px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 15px;
    color: #212121;
    text-align: center;
    top:-10px
}
.man{
    font-size: 12px;
    font-weight: 10000;
    position:relative;
    color:#166AFF;;
    top: -12px;
    left: 6px
}
.ki{
    margin-top: 5px;
    margin-bottom: 15px;
}
.ji{
    margin-top: 13px;
    margin-bottom: 15px;
}
.hr{
    border-top: 0.5px solid #E4E8ED;
}
.duiyaun{
    height: 165px;
    background: #FFFFFF;
    box-shadow: 0 2px 5px 0 #E2E4EB;
    border-radius: 10px;
}
.dmv{
    position:relative;
    margin-top: -25px;
    margin-left: 250px;
    text-align: center;
    width: 82px;
    height: 26px;
    background-image: linear-gradient(90deg, #02E26E 3%, #05CF67 97%);
    border-radius: 12px;
    top:-10px
}
</style>